<template>
	<view class="music-play-page flex-vbox">
		<cu-header theme="blank">
			<template v-slot:action-left>
				<i class="music-icon music-icon-back" @click="eventHandle('navBack')"></i>
			</template>
			<template v-slot:title>{{music.title}}</template>
			<template v-slot:sub-title>{{music.author}}</template>
			<template v-slot:action-right>
				<i class="music-icon music-icon-share"></i>
			</template>
		</cu-header>
		<view class="content flex-item flex-vbox">
			<view class="flex-item">
				<template v-if="playPanelHeight > 0">
					<lyrics v-if="showLyrics" :bottomHeight="playPanelHeight" @changePanel="showLyrics = false"/>
					<album v-else @changePanel="showLyrics = true"/>
				</template>
			</view>
			<play-panel id="playPanel"/>
		</view>
	</view>
</template>

<script>
	import cuHeader from '../../components/cu-header/cu-header.vue'
	import playPanel from '../../components/play-panel/play-panel.vue'
	import lyrics from '../../components/lyrics/lyrics.vue'
	import album from '../../components/album/album.vue'
	export default {
		components: {
			cuHeader,
			playPanel,
			lyrics,
			album
		},
		data() {
			return {
				showLyrics: true,
				playPanelHeight: 0,
				StatusBar: this.StatusBar
			}
		},
		computed: {
			music() {
				return this.$store.state.music
			}
		},
		mounted() {			
			const query = uni.createSelectorQuery().in(this);
			query.select('#playPanel').boundingClientRect(data => {
				this.playPanelHeight = data.height;
			}).exec();
		},
		methods: {
			eventHandle(key) {
				switch (key){
					case 'navBack':
						uni.navigateBack();
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.music-play-page{
		color: #FFFFFF;
		background: radial-gradient(#3C545D 10%, #0C375B 86%, #032954 100%);
		height: 100vh;
	}
</style>
